<template>
  <div class="listOut">
    <HeaderView />
    <div class="artMain" ref="artMain">
      <div class="content">
     <div class="updown">
        <div v-show="isUpdowm">下拉刷新</div>
        <div v-show="!isUpdowm">
          <div v-show="isLoad">加载中...</div>
          <div v-show="!isLoad">请求成功...</div>
        </div>
      </div>
        <div class="artbt">
          <AtItem v-for="item in artList" :key="item.id" :AtallObj="item" />
        <div class="more">
        <div v-show="isMore">正在加载中...</div>
        <div v-show="!isMore">没有更多数据了</div>
      </div>
        </div>
      </div>

    </div>
    <TabBar />
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import HeaderView from '@/components/HeaderView'
import TabBar from '@/components/tabBar/TabBar'
import AtItem from '@/components/AtItem'
import { getArtFun } from '@/network/innerAxios'
BScroll.use(PullDown)
BScroll.use(Pullup)
export default {
  components: {
    HeaderView,
    TabBar,
    AtItem
  },
  async mounted () {
    // console.log(this.$refs.artMain)
    await this.getArtData()
    // 初始化
    this.initScroll()
  },
  data () {
    return {
      isLoad: true,
      isUpdowm: true,
      isMore: false,
      artList: [],
      bscroll: null,
      page: 1,
      resData: []
    }
  },
  methods: {
    // 初始化
    initScroll () {
      this.bscroll = new BScroll(this.$refs.artMain, {
        pullUpLoad: true,
        pullDownRefresh: true
      })
      // 上拉事件下拉刷新
      this.bscroll.on('pullingDown', this.pullDowFun)
      // 触底事件触底加载更多
      this.bscroll.on('pullingUp', this.pullupFun)
      this.bscroll.on('scroll', this.onScroll)
    },
    onscroll (res) {
      console.log(res.y)
    },
    // 下拉刷新
    pullDowFun () {
      this.isUpdowm = false
      setTimeout(async () => {
        this.page = 1
        this.artList = []
        await this.getArtData()
        // 所谓的下拉刷新其实就是相当于把一些数据初始化
        // 结束下拉刷新动作
        this.isLoad = false
        setTimeout(() => {
          this.bscroll.finishPullDown()
          this.isLoad = true
          this.isUpdowm = true
        }, 1000)
      }, 1000)
      this.bscroll.refresh()
    },
    // 触底加载更多
    async pullupFun () {
      this.isMore = true
      if (!this.resData.length) {
        this.isMore = false
        // 结束
        this.bscroll.finishPullUp()
        return
      }
      this.page++
      await this.getArtData()
      this.bscroll.finishPullUp()
      this.bscroll.refresh()
    },
    async getArtData () {
      await getArtFun(this.page).then(res => {
        console.log(res.data)
        const oldList = this.artList
        const nsList = oldList.concat(res.data)
        this.artList = nsList
        this.resData = res.data
        this.isMore = false
        // console.log(this.artList)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.artMain{
  //100vh视宽 - 头部高度和tabbar的高度
  height:calc(100vh - 2rem);
  overflow:hidden;
  padding:0 0.2rem;
  box-sizing: border-box;
  .more ,.updown{
    font-size: 0.28rem;color:#888;
    text-align: center;
    line-height: 0.5rem;
    height: 1rem;
  }
  .updown{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    line-height:  1rem;
    transform: translateY(-100%)
  }
  .artbt{
    margin-top: 0.1rem;
  }
}
</style>
